<template>
  <div class="purchase-container">
    <purchase-header/>
    <template v-if="purchase">
      <div class="body-container w">
        <div class="left-container" v-if="purchase.privacy === 1">
          <dl class="dl-left">
            <dd>联&nbsp;系&nbsp;人：{{ purchase.contact_name }}</dd>
            <dd>联系电话：{{ purchase.contact_num }}</dd>
          </dl>
        </div>
        <div class="left-container" v-else>
          <dl class="dl-left">
            <dd>联系方式在报价后可见</dd>
          </dl>
        </div>
        <div class="right-container">
          <h2 class="title-purchase">{{ purchase.title }}</h2>
          <div class="content-right">
            <div class="top-content">
              <p>采购发布时间：{{ purchase.create_time | unixToDate }}</p>
              <p>报价截止时间：{{ purchase.closing_date | unixToDate }}</p>
              <p>期望收货时间：{{ purchase.receiving_date | unixToDate }}</p>
              <div class="top-quoted">
                <div class="action"><span class="left-angle"><i></i></span>
                  <div class="offer-btn">
                    <a :href="MixinDomain.seller + '/order/quotations/add?purchase_id=' + purchase.purchase_id" target="_blank">我要报价</a>
                  </div>
                  <span class="right-angle"></span>
                </div>
                <!--<div class="mic-date">已有1条报价</div>-->
              </div>
            </div>
            <p class="title-con">采购商品</p>
            <el-table :data="[{}]">
              <el-table-column label="商品名称">
                <span>{{ purchase.goods_names }}</span>
              </el-table-column>
              <el-table-column label="商品规格">
                <span>{{ purchase.goods_sku }}</span>
              </el-table-column>
              <el-table-column label="采购数量">
                <span>{{ purchase.goods_num + purchase.goods_unit }}</span>
              </el-table-column>
              <el-table-column label="采购单价">
                <span>￥{{ purchase.goods_price | unitPrice }}【{{ getPriceTypeText() }}】</span>
              </el-table-column>
              <el-table-column>
                <div v-if="purchase.goods_img === ''">
                  <span> </span>
                </div>
                <div v-else>
                  <a :href="purchase.goods_img" target="_blank">
                    <img :src="purchase.goods_img" class="goods-img"/>
                  </a>
                </div>
              </el-table-column>
            </el-table>

            <p class="title-con">采购要求</p>
            <ul class="list-require">
              <li><span>收货地：{{ `${purchase.ship_province}-${purchase.ship_city}-${purchase.ship_county}` }}</span></li>
              <li><span>要求供应商发货地：{{
                  `${purchase.seller_province}-${purchase.seller_city}-${purchase.seller_county}`
                }}</span></li>
              <li><span>发票要求：{{ purchase.need_receipt === 0 ? '无需发票' : '需要发票' }}</span></li>
            </ul>

            <p class="title-con">补充说明</p>
            <p style="line-height:25px">{{ purchase.purchase_explain || '无' }}</p>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import Vue from 'vue'
import * as API_Purchase from '@/api/purchase'
import PurchaseHeader from './-PurchaseHeader'
import { Table, TableColumn } from 'element-ui'

Vue.use(Table)
Vue.use(TableColumn)

export default {
  name: 'purchase-detail',
  layout: 'full',
  components: { PurchaseHeader },
  data() {
    return {
      purchase_id: '',
      purchase: ''
    }
  },
  mounted() {
    this.purchase_id = this.$route.query.purchase_id
    this.Get_PurchaseDetail()
  },
  methods: {
    /**
     * 获取采购单详情
     * @returns {Promise<void>}
     * @constructor
     */
    async Get_PurchaseDetail() {
      const res = await API_Purchase.getPurchaseDetail(this.purchase_id)
      this.purchase = res
    },
    getPriceTypeText() {
      if (!this.purchase) return ''
      switch (this.purchase.price_type) {
        case 0:
          return '可议价'
        case 1:
          return '不可议价'
        case 2:
          return '面议'
      }
    }
  }
}
</script>

<style type="text/css" lang="scss" scoped>
@import '../../assets/styles/color';
.purchase-container {
  background-color: #f5f5f5;
}
.body-container {
  display: flex;
  justify-content: space-between;
  .left-container {
    width: 200px;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 10px;
    .dl-left {
      margin-top: 8px;
      border-bottom: 1px dashed #e1e1e1;
      padding-bottom: 10px;
      dd {
        line-height: 20px;
      }
    }
  }
  .right-container {
    width: 950px;
    margin-top: 20px;
    .title-purchase {
      height: 30px;
      padding-left: 20px;
      border-left: 5px solid $color-main;
      font-size: 22px;
      line-height: 30px;
      color: #333;
    }
    .content-right {
      padding: 20px;
      box-sizing: border-box;
      border: solid 1px #E1E1E1;
      background-color: #ffffff;
      margin-top: 20px;
    }
    .top-content {
      display: block;
      position: relative;
      z-index: 1;
      height: 100px;
      border-bottom: dotted 1px #E1E1E1;
      p {
        line-height: 25px;
      }
      .top-quoted {
        position: absolute;
        z-index: 1;
        right: -28px;
        top: 0;
        width: 360px;
        height: 90px;
        .action {
          position: relative;
          z-index: 1;
          width: 100%;
          height: 60px;
          background-color: $color-main;
          .left-angle {
            position: absolute;
            z-index: 1;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            border-top: 30px solid #FFFFFF;
            border-right: 20px solid $color-main;
            border-bottom: 30px solid #FFFFFF;
            i {
              display: block;
              width: 12px;
              height: 12px;
              margin: -6px 0 0 15px;
              border-radius: 100%;
              background-color: #FFF;
            }
          }
          .right-angle {
            position: absolute;
            z-index: 1;
            right: 0;
            bottom: -8px;
            width: 0;
            height: 0;
            border-top: 8px solid $color-main;
            border-right: 8px solid transparent;
          }
          .offer-btn {
            position: absolute;
            z-index: 1;
            top: 12px;
            left: 50px;
            width: 90px;
            height: 36px;
            a {
              display: block;
              width: 90px;
              height: 36px;
              text-align: center;
              border-radius: 3px;
              background-color: #ECF5FE;
              font-size: 14px;
              color: $color-main;
              line-height: 36px;
            }
          }
        }
        .mic-date {
          padding: 10px 0 0 50px;
          line-height: 20px;
          font-size: 14px;
        }
      }
    }
    .title-con {
      height: 20px;
      margin: 14px 0;
      padding-left: 10px;
      border-left: 5px solid $color-main;
      font-size: 18px;
      line-height: 20px;
      color: #333;
    }
    .list-require {
      li {
        line-height: 25px;
      }
    }
    .goods-img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
